<template>
  <div>
    <div class="bycbigbox">
      <!-- 轮播图区域 -->
      <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banner" :key="index">
            <van-image
              :src="item.pic"
              style="width: 100%; height: 380px"
            ></van-image>
          </van-swipe-item>
        </van-swipe>
        <!-- 返回上一级按钮 -->
        <div class="back" @click="$router.go(-1)">
          <van-icon name="arrow-left" size="19"></van-icon>
        </div>
      </div>
      <div>
        <ul class="bycul">
          <li>{{ goods_info.name }}</li>
          <li>{{ goods_info.recommendStatusStr }}</li>
          <li>
            <div>
              <span>低价￥:{{ goods_info.minPrice }}</span> &nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>原价￥:{{ goods_info.originalPrice }}</span>
            </div>
            <span>库存:{{ goods_info.stores }}</span>
          </li>
        </ul>
      </div>
      <div class="bycboxx"></div>

      <!-- 详情部分 -->
      <van-tabs v-model="activeName" line-width="160px">
        <van-tab title="商品介绍" name="a" v-html="content">
          <div class="goods-item"></div>
        </van-tab>
        <van-tab title="商品评价" name="b">商品评价</van-tab>
      </van-tabs>
    </div>
    <!-- 购物车操作2 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click.native="show = true"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 加入购物车 -->
    <van-sku v-model="show" :sku="sku" :goods-id="id" :goods="goods" />
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      url: "",
      banner: [],
      goods_info: {},
      activeName: 0,
      content: "", //商品介绍

      // 购物车部分
      id: 0,
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "https://img.yzcdn.cn/1.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "https://img.yzcdn.cn/1p.jpg", // 用于预览显示的规格类目图片
              },
              {
                id: "1",
                name: "蓝色",
                imgUrl: "https://img.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img.yzcdn.cn/2p.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img.yzcdn.cn/1.jpg",
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {},
  //生命周期
  created() {},
  mounted() {
    this.url = this.$store.state.appurl;
    let id = this.$route.query.id;
    console.log(id);
    this.$axios.post(`${this.url}/shop/goods/detail?id=` + id).then((res) => {
      console.log(res);
      this.banner = res.data.pics;
      this.goods_info = res.data.basicInfo;
      this.content = res.data.content;

      this.$nextTick(() => {
        let imgs = document.getElementsByClassName("img-lazyload");
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].style.width = "375px";
          imgs[i].style.height = "100%";
        }
      });
    });
  },
};
</script> 

<style scoped lang="scss">
.goods-item {
  width: 100%;
}
.bycbigbox {
  width: 100%;
  overflow: auto;
}
.bycboxx {
  width: 100%;
  height: 10px;
  background: #dddd;
}
.bycul {
  width: 100%;
  padding: 13px;
  box-sizing: border-box;
  li:nth-of-type(1) {
    font-size: 17px;
  }
  li:nth-of-type(2) {
    font-size: 14px;
    color: darkgray;
    margin: 6px 0px;
  }
  li:nth-of-type(3) {
    display: flex;
    justify-content: space-between;
    color: red;
    font-size: 11px;
    span:nth-of-type(3) {
      color: royalblue;
    }
  }
}
.van-swipe {
  position: relative;
}
.back {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: cadetblue;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: aliceblue;
}
</style>
